import React, { memo, useState, useEffect } from 'react'
import { Button, Form, Input } from 'antd-mobile';
import axios from 'axios'
import { history } from 'umi';
import { Image, Checkbox, Toast, Cell } from 'react-vant';
import './index.less'

export default memo(function index() {
    const [phone, setPhone] = useState('');
    const [code, setCode] = useState('');
    const [count, countState] = useState(0)         //倒计时
    const [loading, setLoading] = useState(200);
    const [show, setShow] = useState(true)
    const [codes, setCodes] = useState(254248)
    const [data, setData] = useState()
    const [flag, setflag] = useState(false)
    const [sending, setSending] = useState(false)
    const [txt, settxt] = useState('')

    const [newda, setsetda] = useState({})

    useEffect(() => {
        if (count > 0) {
            setTimeout(() => {
                countState(count - 1)
            }, 1000)
        }
    }, [count])
    const [form] = Form.useForm()

    const onFinish = values => {
        console.log(values)
    }
    const login = () => {
        if (code == codes) {
            if (loading == 201) {
                history.push('/app/home', { _id: data._id })
            }
            console.log(newda, 'woshinewda');
            //保存到本地缓存
            localStorage.setItem('user', JSON.stringify(newda))
            Toast.success('登录')
        } else {
            Toast.fail('失败')
        }
    }
    const getBtn = () => {
        const phonenum = /^1[3456789]\d{9}$/
        if (phonenum.test(phone)) {
            axios({
                method: 'get',
                url: `http://localhost:3000/login?phone=${phone}`,
            }).then((res) => {
                console.log(res);
                setData(res.data.data[0])
                setLoading(res.data.code)
                setCodes(res.data.captcha)
                setsetda(res.data.data[0])
            })
        } else {
            Toast.info('手机号错误')
            // Toast.loading({
            //     message: '加载中...',
            //     forbidClick: true,
            // })
        }
        setTimeout(() => {
            // alert(`验证码发送到了${phone}`)
            countState(59)
            setSending(true)
        }, 1000)
        // console.log(code, 12312312);
        settxt(code)
    }
    return (
        <div className="login">
            <div className="biaodan">
                <Image width='100%' height='100%' src="	https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E7%99%BB%E5%BD%95/u37.png" />
                {/* <div style={{ position: "relative", top: "-70px", border: "1px solid grey" }}> */}
                <Form
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block disabled={flag ? '' : 'disabled'}
                                onClick={() => { login() }} style={{ backgroundColor: '#58A133', borderRadius: '20px' }}>
                                登录
                            </Button>
                        </div>
                    }
                >

                    <Form.Item
                        rules={[{ required: true, message: '请填写手机号' }]}
                        name='phoneNumber'
                    >
                        <Input placeholder='请输入手机号' onChange={(value) => setPhone(value)} />
                    </Form.Item>

                    <Form.Item
                        rules={[{ required: true, message: '请填写验证码' }]}
                        name='code'
                    >
                        <Input placeholder='请输入验证码' style={{ width: '60%' }} value={code} onChange={(e) => {
                            console.log(e);
                            setCode(e)
                        }} />
                        <Button disabled={count > 0} onClick={() => { getBtn() }} style={{ color: '#93BD0D' }}>{count > 0 ? `${count}秒后重试` : '发送验证码'}</Button>
                    </Form.Item>

                    <Checkbox defaultChecked shape='square' checked={flag} checkedColor='#85AB52' style={{ height: "15px", width: '15px' }} onChange={(e) => {
                        console.log(e);
                        setflag(e)
                    }}>
                    </Checkbox>
                    <span style={{ display: 'inline-block', marginLeft: '10px' }}>我已同意 <span ><span style={{ color: '#93BD0D', marginLeft: '10px' }}>用户协议</span></span></span>
                </Form>
            </div>
        </div>
    )
})